<template>
  <div>
    <el-card>
      <div>
        <el-image :src="$img+skuInfo.skuPic" style="width: 230px;height: 230px"></el-image>
      </div>
      <div>
        <el-text>{{ skuInfo.skuName }}</el-text>
      </div>
      <div>
        <el-text size="small" type="danger">限时秒杀，手慢无</el-text>
      </div>
      <template #footer>
        <div style="display: flex;justify-content: space-between">
          <div>
            <div style="color: red">
             ￥<span style="font-size: large;"> {{ skuInfo.salePrice }}</span>
            </div>
            <div style="font-size: small" class="item_center">
              已售{{sku.soldPercentage}}%<el-progress :percentage="sku.soldPercentage" style="width: 100px" :show-text="false" />
            </div>
          </div>
          <div>
            <button @click="selectSku(skuInfo.skuId)">立即抢购</button>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>

let porps = defineProps(['sku'])
let skuInfo = porps.sku

let emit=defineEmits(['selectSku'])

function selectSku(skuId){
  emit('selectSku',skuId)
}

</script>

<style scoped>

</style>
